<template>
	<div>
		<div>
		   <div>
		        <el-button type="primary" @click="addBtn" size="mini">添加</el-button>
		    </div>
		</div>
		<br>
		<el-table  :data="list"
			 border  
			 style="width: 100%"
			>
			<el-table-column   align="center"    prop="title"    label="标题"></el-table-column>
			<el-table-column   align="center"    prop="account_type"    label="账户类型"></el-table-column>
			<el-table-column   align="center"    prop="account_number"    label="账户号码"></el-table-column>
			<el-table-column  label="状态"   align="center">
			     <template slot-scope="scope">
			        <div>
						<el-tag v-if="scope.row.status==0" size="small" effect="dark" type="danger">禁用</el-tag>
						<el-tag v-if="scope.row.status==1" size="small" effect="dark">启用</el-tag>
					</div>
			     </template>
			 </el-table-column>
			<el-table-column   align="center"    prop="add_time"    label="添加时间"></el-table-column>
			<el-table-column   align="center"    prop="update_time"    label="修改时间"></el-table-column>
		   <el-table-column  label="操作"   align="center">
		        <template slot-scope="scope">
					<span style="margin-right: 10px;" class="button_text" @click="editRow(scope.row)">编辑</span>
					<span class="button_text" @click="delRow(scope.row.id)">删除</span>
		        </template>
		    </el-table-column>
		</el-table>
		<div class="page">
		    <el-pagination
		            background
		            @size-change="pageChange"
		            @current-change="handleCurrentChange"
		            :current-page="page"
		            :page-size="pageSize"
		            layout="total, sizes, prev, pager, next, jumper"
		            :total="page_totle">
		    </el-pagination>
		</div>
		<el-dialog
		        :title="addTitle"
				:close-on-click-modal="false"
		        :visible.sync="formShow"
		        width="1000px"
		>
		  <div>
			  <!-- id:null,
			  account_type:"",
			  account_number:"",
			  title:'',
			  qr_code:"",
			  status:'1',
			  type:'2' -->
			  <el-form ref="form" :model="form" label-width="100px">
				  <el-form-item label="标题">
				      <el-input v-model="form.title" size="small"></el-input>
				  </el-form-item>
				  <el-form-item label="账户类型">
					  <el-select size="mini" v-model="form.account_type" placeholder="请选择">
					      <el-option
					        v-for="item in options"
					        :key="item.label"
					        :label="item.label"
					        :value="item.label">
					      </el-option>
					    </el-select>
				    </el-form-item>
					<el-form-item label="账户号码">
					    <el-input v-model="form.account_number" size="small"></el-input>
					</el-form-item>
					<el-form-item label="描述" v-if="form.account_type=='银行卡'">
					    <el-input v-model="form.desc" size="small"></el-input>
					</el-form-item>
					<el-form-item label="微信二维码" v-if="form.account_type=='微信'">
						<el-button size="mini" @click="isShow=true" type="primary">选择图片</el-button>
					</el-form-item>
					<el-form-item v-if="form.qr_code">
					  <div style="display: flex;">
						  <div style="position: relative;margin-right: 10px;" >
							  <img style="width: 100px;height: 100px;" :src="form.qr_code" alt="">
							  <i @click="delImg" class="el-icon-circle-close" style="font-size: 20px;position: absolute;top: 0;right:0;cursor: pointer;"></i>
						  </div>
					  </div>
					</el-form-item>
					
					<el-form-item label="状态">
					    <el-radio-group v-model="form.status">
					      <el-radio label="0">禁用</el-radio>
					      <el-radio label="1">启用</el-radio>
					    </el-radio-group>
					  </el-form-item>  
				  <el-form-item >
				      <el-button type="primary" @click="confirm" size="small">确定</el-button>
				  </el-form-item>
			  </el-form>
		  </div>
		</el-dialog>
		
		
		<el-dialog title="选择图片"
				:close-on-click-modal="false"
				:modal-append-to-body="false"
				:append-to-body="true"
		        :visible.sync="isShow"
		        width="1050px">
			 <div style="padding-bottom: 30px;">
				 <imgSys @getImgData="getImgData" />
			 </div>
		     
		</el-dialog>
	</div>
</template>

<script>
	import imgSys from '@/components/imgSys'
	export default {
		components:{
			imgSys
		},
		data(){
			return {
				useDepPrice:0,
				title:"",
				page:1,
				pageSize:10,
				form:{
					id:null,
					account_type:"",
					account_number:"",
					title:'',
					qr_code:"",
					status:'1',
					type:'2',
					qr_code:'',
					desc:''
				},
				addTitle:'新增',
				isShow:false,
				options:[
					{
						label: '银行卡',
					},
					{
						label: '微信',
					},
					{
						label: '支付宝',
					}
				]
			}
		},
		mounted() {
			this.lodeList()
		},
		methods:{
			
			getImgData(val){
				this.form.qr_code = val
				this.isShow = false
			},
			delImg(i){
				this.form.qr_code = ''
			},
			editRow(row){
				this.addTitle = '编辑'
				for(let i in this.form){
					this.form[i] = row[i]
				}
				this.formShow = true
			},
			delRow(id){
				this.$confirm('确定删除', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
				          this.$post('/user/delAccount',{id:id},res=>{
							  this.lodeList()
						  })
				        })
			},
			clearSearch(){
				this.title = ''
				this.search()
			},
			confirm(){
				
				this.$post('/user/addEditAccount',this.form,res=>{
					if(res.data.code==200){
						this.$message.success('操作成功')
						this.formShow = false
						this.lodeList()
					}
				})
			},
			addBtn(){
				this.addTitle = '新增'
				this.form={
					id:null,
					account_type:"",
					account_number:"",
					title:'',
					qr_code:"",
					status:'1',
					type:'2',
					qr_code:'',
					desc:''
				}
				this.formShow = true
			},
			lodeList(){
				
				this.$post('/user/lodeAccountList',{type:2},res=>{
					this.list = res.data.data
				})
			},
		}
	}
</script>

<style>
</style>